<template>
  <div ref="pie2" class="echarts"></div>
</template>

<script>
import Echarts from 'echarts'
export default {
  data() {
    return {
      myChart: {},
      flag: false
    }
  },

  props: ['echartObj'],

  watch: {
    echartObj() {
      if (this.flag != true) {
        this.$nextTick(() => {
          this.flag = true
          this.loadEchart()
        })
      }
    }
  },
  mounted() {
    let _this = this
    // setTimeout(() => {
    //   this.loadEchart()
    // })
    window.onresize = function() {
      _this.myChartPie2.resize()
    }
  },

  methods: {
    loadEchart() {
      var _this = this
      var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
      var charPie3currentIndex = 0
      var index = 0
      // console.log(this.echartObj)
      this.myChartPie2 = Echarts.init(this.$refs.pie2) // 动态绑定Id名这样就能解决传多个Echarts过来后只显示一个问题
      this.myChartPie2.setOption({
        legend: this.echartObj.legend,
        color: this.echartObj.color,
        series: this.echartObj.series,
        tooltip: this.echartObj.tooltip,
        grid: this.echartObj.grid,
        xAxis: this.echartObj.xAxis,
        yAxis: this.echartObj.yAxis,
        radar: this.echartObj.radar,
        dataRange: this.echartObj.dataRange,
        dataset: this.echartObj.dataset,
        geo: this.echartObj.geo,
        backgroundColor: this.echartObj.backgroundColor,
        visualMap: this.echartObj.visualMap,
        toolbox: this.echartObj.toolbox
      })

      // if (this.echartObj.series[0].type) {
      //   if (this.echartObj.series[0].type == 'pie') {
      // 2、鼠标移动上去的时候的高亮动画
      this.myChartPie2.on('mouseover', function(param) {
        isSet = false
        // console.log(param);

        // charPie3currentIndex = param.dataIndex
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.myChartPie2.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPie3currentIndex
        })
        charPie3currentIndex = param.dataIndex
        // 高亮当前图形
        _this.myChartPie2.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
        // 显示 tooltip
        _this.myChartPie2.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 3、自动高亮展示

      var chartHover = function() {
        // console.log(isSet);

        if (isSet) {
          var dataLen = _this.echartObj.series[0].data.length
          // console.log(_this.echartObj.series[0].data)

          // 取消之前高亮的图形
          _this.myChartPie2.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPie3currentIndex
          })
          // index= (index+ 1) % dataLen;
          charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
          // 高亮当前图形
          _this.myChartPie2.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: charPie3currentIndex
          })
          // 显示 tooltip
          _this.myChartPie2.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: charPie3currentIndex
          })
        }
      }

      _this.startCharts = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      _this.myChartPie2.on('mouseout', function(param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000)
          isSet = true
        }
      })
      //   }
      // }
    }
  }
}
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>